<template>
  <div class="positioning" @click.stop="showCityList" @mouseleave="leaveCity">
    <i class="el-icon-location-information" />
    <span class="city" :title="currentCity">{{ currentCity }}</span>
    <div v-if="showCity" class="city-wrap">
      <!-- 省级列表 -->
      <ul v-if="isProvince" class="sheng" @click.stop="tabProvince">
        <li v-for="(item,index) in cityList" :key="index">
          <span :class="{active: item.provinceName === currentProvince }">{{ item.provinceName.substring(0,2) }}</span>
        </li>
      </ul>
      <!-- 市级列表 -->
      <ul v-if="isCity" class="shi" @click.stop="tabCity">
        <li v-for="(item,index) in mallCityList" :key="index">
          <span :class="{active: item.cityName === currentCity }">{{ item.cityName }}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import cityList from './citys'
// import BMap from 'BMap'
export default {
  name: 'CityPositioning',
  components: {},
  data() {
    return {
      // 当前省
      currentProvince: '',
      // 当前市
      currentCity: '',
      // 下拉选择
      showCity: false,
      // 市级列表
      mallCityList: [],
      // 城市列表
      cityList,
      // 点击时进入的省
      lastProvince: ''
    }
  },
  computed: {
    isProvince() {
      return this.cityList.length > 0
    },
    isCity() {
      return this.mallCityList.length > 0
    }
  },
  watch: {
    currentCity(newCity) {
      newCity && this.$store.dispatch('app/setCurrentCity', newCity)
    }
  },
  mounted() {
    this.getCurrentCityName().then(res => {
      if (res) {
        const { address: { province, city }} = res
        this.currentProvince = province
        this.currentCity = city
        this.lastProvince = province
        sessionStorage.setItem('currentCity', city)
      }
    })
  },
  methods: {
    // 切换省
    tabProvince(event) {
      // 事件委托只触发子元素才执行
      if (event.target === event.currentTarget) return
      // 获取城市文本
      const text = event.target.innerText
      // 与当前城市相同 则点击无效
      if (this.currentProvince.includes(text)) return
      // 获取切换后的城市
      const item = this.cityList.find(item => item.provinceName.includes(text))
      this.currentProvince = item.provinceName
      // 重新获取市级列表
      this.getCitys()
    },
    // 切换市
    tabCity(event) {
      // 事件委托只触发子元素才执行
      if (event.target === event.currentTarget) return
      // 获取城市文本
      const text = event.target.innerText
      // 重复选择则点击无效
      if (this.currentCity === 'text') return
      // 当前回显的市
      this.currentCity = text
    },
    // 显示城市列表
    showCityList() {
      this.showCity = true
      this.lastProvince = this.currentProvince
      // 初次获取市级列表
      this.getCitys()
    },
    // 离开city下拉框
    leaveCity() {
      this.showCity = false
      // 还原市所对应的省份
      if (this.lastProvince === this.currentProvince) return
      const item = this.cityList.find(item => {
        return item.mallCityList.some(item => item.cityName === this.currentCity)
      })
      this.currentProvince = item.provinceName
    },
    // 获取市级列表
    getCitys() {
      const item = this.cityList.find(item => item.provinceName === this.currentProvince)
      this.mallCityList = item.mallCityList
    },
    // 获取当前城市名
    getCurrentCityName() {
      return new Promise((resolve) => {
        const myCity = new BMap.Geolocation()
        console.log(myCity.getCurrentPosition)
        myCity.getCurrentPosition((result) => {
          console.log('Geolocation', result)
          resolve(result)
        })
      })
    }
  }
}
</script>

<style lang='scss' scoped>
* {
  margin: 0;
  padding: 0;
}
.positioning {
  color: #eee;
  width: 100px;
  cursor: pointer;
  text-align: center;
  position: relative;
  float: left;
  line-height: 40px;
  &:hover {
    color: #1890ff;
  }
  i {
    font-size: 18px;
    position: relative;
    margin-right: 4px;
    top: 3px;
    text-align: right;
  }
  .city {
    width: 70px;
    display: inline-block;
    font-size: 14px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    vertical-align: middle;
    text-align: left;
  }
  .active {
    color: #1890ff;
  }
  .city-wrap {
    transition: height .5s linear;
    position: absolute;
    top: 40px;
    right: 0px;
    width: 540px;
    overflow: hidden;
    z-index: 9999;
    font-size: 13px;
    box-shadow: 0px 8px 15px #999;
    background: #fff;
    .sheng,.shi {
      list-style: none;
      overflow: hidden;
      text-align: center;
      line-height: 30px;
      color: #999;
      float: right;
      width: 270px;
      li {
        padding: 6px;
        float: left;
      }
    }
    .sheng {
      border-left: 1px solid #ddd;
    }
  }
}
</style>
